/* pages/appointment/index.wxss */
.appointment {
  background: #FAF9FF;
  .page-content {
    padding:0 30rpx;
    width:100%;
    box-sizing: border-box;
    .top {
      position: relative;
      width: 100%;
      height: 170rpx;

      // .top-bg {
      //   width: 100%;
      //   height: 100%;
      // }

      .top-title {
        position: absolute;
        left: 0;
        width: 100%;
        font-size: 17px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 400;
        color: #000;
        display: flex;
        align-items: center;
        justify-content: center;

        // border:1px solid red;
        .back {
          position: absolute;
          left: 10rpx;
        }
      }
    }

    .banner {
      width: 100%;
      height: 300rpx;
      // position: relative;

      .banner-image {
        // position: absolute;
        // left: 50%;
        width: 100%;
        height: 300rpx;
        // transform: translate(-50%, -190rpx);
        // border-radius: 10rpx;
      }
    }

    .form {
      padding: 50rpx 20rpx;
      width: 100%;
      margin: 30rpx auto;
      background-color: #fff;
      border-radius: 10rpx;
      .form-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #dfdfdf;
        padding: 10rpx 0;
        font-size:28rpx;
        +.form-item {
          margin-top: 34rpx;
        }

        .left {
          font-size: 28rpx;
          font-weight: 500;
          color: #333333;

          .required {
            color: #FF6326;
            margin-right: 6rpx;
          }
        }

        .right {
          display: flex;
          align-items: center;

          .picker {
            display: flex;
            align-items: center;

            .picker-content {
              display: flex;
              align-items: center;
            }
          }

          .input-wrapper {
            margin-right: 12rpx;
            // border: 1px solid red;

            .input {
              text-align: right;
            }
          }

          .icon-arrow {
            width: 19rpx;
            height: 30rpx;
          }

          .icon-geo {
            width: 26rpx;
            height: 32rpx;
          }

          .icon-area {
            width: 26rpx;
            height: 26rpx;
            transform: scale(1.35);
          }
        }
        .type{
          padding:10rpx 30rpx;
          border:1px solid #CBCBCB;
          margin-left:10rpx;
          color:#CBCBCB;
          border-radius: 8rpx;
        }
        .type.active{
          background-color: #FA9616;
          color:#fff;
          border:1px solid transparent;
        }
        // .type-right{}
      }
    }
    

    .btn-appointment {
      display: block;
      width: 626rpx;
      height: 87rpx;
      margin: 50rpx auto 10rpx auto;
    }
    .certificate{
      margin:30rpx auto;
      width:100%;
      background-color: #fff;
      padding:50rpx 30rpx;
      box-sizing: border-box;
      border-radius: 10rpx;
      image{
        width:100%;
        margin-bottom:20rpx;
      }
      view{
        font-size:28rpx;
        color:#52B062;
        margin-bottom:10rpx;
      }
    }

    .share {
      position: fixed;
      width: 99rpx;
      height: 99rpx;
      right: 0rpx;
      top: 480rpx;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      background: none;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .customer-service {
      position: fixed;
      width: 99rpx;
      height: 99rpx;
      right: 0rpx;
      top: 585rpx;
      padding: 0;
      margin: 0;
      border-radius: 50%;
      background: none;

      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}